import React, { useState, useEffect } from 'react';
import { Route, Switch } from 'react-router-dom';
import axios from 'axios';
import './index.css';

import FindingPage from '@page/finding';
import PodcastPage from '@page/podcast';
import MyPage from '@page/me';
import KTVPage from '@page/ktv';
import CloudPage from '@page/cloud';
import Profile from '@page/profile';
import BottomNavBar from '@compb/BottomNavBar';
import Disc from '@compa/Disc';
import { mobileLogin } from '../../utils/api/login';
import AudioPlay from '../../components/business/AudioPlay';
import SongPage from '../SongPage';
import VideoPage from '../VideoPage';

const MainPage = ({ }) => {
    const [showUserProfile, setShowUserProfile] = useState(false);
    const [user, setUser] = useState(null);
    function setUserProfileDisplay(bool) {
        setShowUserProfile(bool);
    }
    useEffect(() => {
        console.log("Main page init")
        if (localStorage.getItem("PROFILE")) {
            let profile = JSON.parse(localStorage.getItem("PROFILE"));
            setUser(profile)
        }
    }, []);
    return (
        <div className="main-container page-container">
            <div className="user-profile-btn" onClick={() => setUserProfileDisplay(true)}>
                <span className="iconfont icon-ziyuan"></span>
            </div>
            <div className={showUserProfile ? "user-profile-panel show" : "user-profile-panel"}>
                <Profile user={user} />
            </div>
            <div className={showUserProfile ? "backdrop display" : "backdrop"} onClick={() => setUserProfileDisplay(false)}></div>
            <div className="subpage-container page-container">
                <Switch>
                    <Route path='/main/finding' component={FindingPage} />
                    <Route path='/main/podcast' component={PodcastPage} />
                    <Route path='/main/me' component={MyPage} />
                    <Route path='/main/ktv' component={KTVPage} />
                    <Route path='/main/cloud' component={CloudPage} />
                </Switch>
            </div>
            <AudioPlay />
            <BottomNavBar shouldUpdate={1} />
            <SongPage />
            <VideoPage />
            <Disc />
        </div>
    )
}

export default MainPage;